<div class="uploader" style="display: none">
  <input (change)="uploadDirEvent()" id="uploader-dir" type="file" webkitdirectory>
  <input (change)="uploadFileEvent()" id="uploader-file" multiple type="file">
</div>

<nz-modal [(nzVisible)]="uploadModalVisible" class="upload-modal-holder" nzClosable="false" nzWidth="55%">
  <div *nzModalTitle class="upload-modal-header">
    <nz-page-header [nzGhost]="false">
      <!-- 标题栏 与 标签 -->
      <nz-page-header-title>上传文件</nz-page-header-title>
      <nz-page-header-tags>
        <nz-tag *ngIf="task.tagIcon == 'processing'" [nzColor]="task.tagColor">
          <i [nzType]="task.tagIcon" nz-icon nzSpin></i>
          <span>{{task.tag}}</span>
        </nz-tag>
        <nz-tag *ngIf="task.tagIcon != 'processing'" [nzColor]="task.tagColor">
          <i [nzType]="task.tagIcon" nz-icon></i>
          <span>{{task.tag}}</span>
        </nz-tag>
        <nz-tag *ngIf="task.errorMsg != ''">
          <span>{{task.errorMsg}}</span>
        </nz-tag>
      </nz-page-header-tags>

      <!-- 右侧图标 -->
      <nz-page-header-extra>
        <button nz-button nzType="default">取消任务</button>
        <button *ngIf="task.state === 4"
                [disabled]="task.btnDisable"
                (click)="onTaskChange()"
                nz-button nzDanger nzType="primary"
        >
          {{task.title}}
        </button>
        <button *ngIf="task.state !== 4"
                [disabled]="task.btnDisable"
                nz-button nzType="primary"
                (click)="onTaskChange()"
        >
          {{task.title}}
        </button>
      </nz-page-header-extra>

      <nz-page-header-content>
        <nz-descriptions [nzColumn]="12" nzSize="small">
          <nz-descriptions-item [nzSpan]="10" nzTitle="上传路径">
            <span nz-typography nzType="secondary">{{urlDecode(task.uploadPath)}}</span>
          </nz-descriptions-item>
          <nz-descriptions-item [nzSpan]="2" nzTitle="总大小">
            <a>{{fileViewService.humanReadable(task.totalSize)}}</a>
          </nz-descriptions-item>
        </nz-descriptions>

        <!-- 错误展示 -->

        <nz-divider *ngIf="task.error != null" nzText="上传错误"></nz-divider>

        <nz-descriptions *ngIf="task.error != null" [nzColumn]="12" nzSize="small">
          <nz-descriptions-item [nzSpan]="12" nzTitle="容量不足">
            <span nz-typography>在路径<code>{{task.error.endpoint}}</code>上设有容量限制</span>
          </nz-descriptions-item>
          <nz-descriptions-item [nzSpan]="12" nzTitle="错误描述">
            <span nz-typography>
              此路径限制容量上限为
              <mark>{{fileViewService.humanReadable(task.error.limit)}}</mark>,
              剩余空间为<mark>{{fileViewService.humanReadable(task.error.free)}}</mark>
            </span>
          </nz-descriptions-item>
        </nz-descriptions>
      </nz-page-header-content>

      <!-- 进度条展示 -->
      <nz-page-header-footer>
        <nz-progress [nzPercent]="task.percent" nzStatus="active"></nz-progress>
      </nz-page-header-footer>
    </nz-page-header>
  </div>

  <div *nzModalContent>
    <nz-table
      [nzData]="task.subTasks"
      [nzFrontPagination]="false"
      [nzShowPagination]="false"
      [nzScroll]="tableLayout"
      nzTableLayout="fixed"
      nzSize="small"
      nzBordered
    >
      <thead>
      <tr>
        <th nzWidth="8%"></th>
        <th nzWidth="10%"></th>
        <th nzWidth="30%"></th>
        <th nzWidth="30%"></th>
        <th nzWidth="12%"></th>
        <th nzWidth="10%"></th>
      </tr>
      </thead>
      <tbody>
      <ng-container *ngFor="let sub of task.subTasks">
        <tr (mouseleave)="singleTaskInvisibleDeleteBtn(sub)"
            (mouseover)="singleTaskShowDeleteBtn(sub)">
          <td nzAlign="center" rowspan="2" class="upload-file-icon">
            <i [nzIconfont]="fileViewService.getFileIcon(sub.filename)" nz-icon></i>
          </td>
          <td nzAlign="center">
            <span><a>{{fileViewService.humanReadable(sub.file.size)}}</a></span><br>
          </td>
          <td nzAlign="left" nzEllipsis>
            <span nz-typography><strong>{{sub.filename}}</strong></span>
          </td>
          <td nzAlign="left" nzEllipsis>
            <span nz-typography nzType="secondary">实际文件名</span>
          </td>

          <td nzAlign="center">
            <a><span *ngIf="sub.deleteBtnVisible" nz-typography nzType="danger">删除</span></a>
          </td>

          <td nzAlign="center" rowspan="2">
            <button nz-button nzType="default" nzSize="large"
                    [nzLoading]="sub.btnLoading" [disabled]="sub.btnDisable"
                    (click)="onSubTaskChange(sub)"
            >
              <i nz-icon [nzType]="sub.btnIcon"></i>
            </button>
          </td>

        </tr>
        <tr (mouseleave)="singleTaskInvisibleDeleteBtn(sub)"
            (mouseover)="singleTaskShowDeleteBtn(sub)">
          <td colspan="4">
            <nz-progress [nzPercent]="sub.percent" nzStatus="active"></nz-progress>
          </td>
        </tr>
      </ng-container>
      </tbody>
    </nz-table>
  </div>

  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="closeModal()">转到后台</button>
    <button nz-button nzType="link" style="float: left">1 / 1</button>
  </div>
</nz-modal>
